<template>
  <div>
    <div class="wrapper">
      <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
    </div>
    <div class="search-content" ref="search" v-show="keyword">
      <ul>
        <li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">
          {{item.name}}
        </li>
        <li class="search-item border-bottom" v-show="hansNoData">暂无数据</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    name: 'CitySearch',
    // 接收根组件 分发来的JSON数据
    props: {
      cities: Object
    },
    data () {
      return {
        // 存储，用户输入的 内容
        keyword: '',
        list: [],
        timer: null
      }
    },
    // 计算属性
    computed: {
      hansNoData () {
        return !this.list.length
      },

    },
    methods: {
      handleCityClick (city) {
        // city 点击当前城市的 名称
        console.log(city)

        //  通过 dispatch 传递数据到 -- 共享数据池
        // this.$store.dispatch('changeCity', city)
        this.$store.commit('changeCity', city)

        // vuex 高级API 使用方法
        // this.changeCity(city)

        // 编程式导航、页面路由跳转
        this.$router.push('/')
      },
      // 公用数据： 我把vuex 里面的数据映射到当前组件里，映射值 changeCity
      // ...mapMutations(['changeCity'])
    },
    watch: {
      keyword () {
        // 函数节流、优化性能
        if (this.timer) {
          clearTimeout(this.timer)
        }
        // 如果搜索后，去掉搜索内容，列表存在的问题
        if (!this.keyword) {
          this.list = []
          return
        }
        this.timer = setTimeout(() => {
          const result = []
          // 循环JSON 数据
          for (let i in this.cities) {
            // 第二次遍历 拿到 A[...] B[...] C[...] 中的数据项
            this.cities[i].forEach((value) => {
              //  判断如果能在 spell/name 中搜索到关键词,
              if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
                // 则把该项，添加到 数组中
                result.push(value)
              }
            })
          }
          // 把result 赋值 给data中的list 数组, 然后把list 循环出来
          this.list = result
        }, 100)
      }
    },
    mounted () {
      // 滑动 搜索出来的城市列表
      this.scroll = new BScroll(this.$refs.search)
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    wrapper()
    line-height 0.9rem
    background $bgColor

  .search-input
    box-sizing border-box
    text-align center
    width 100%
    line-height .62rem
    color #666
    padding 0 .4rem
    border-radius .1rem

  .search-content
    overflow hidden
    position absolute
    top 1.76rem
    left 0
    right 0
    bottom 0
    background whitesmoke
    color black
    z-index 1

  .search-item
    line-height .62rem
    padding .2rem
    color #333
</style>
